<template>
	<view>
		<!-- <page-meta page-style="{{ showPopup ? 'overflow: hidden;' : '' }}" /> -->
		<view class="box">
			<view class="mian-box">
				<view class="step">
					<view class="z-flex z-padding-t-48">
						<view class="step-img">
							<image v-if="currentStep == 0" class="step-image z-padding-b-24" src="../../static/service/current.png"></image>
							<image v-if="currentStep > 0" class="step-image z-padding-b-24" src="../../static/service/finish.png"></image>
						</view>
						<view class="line"></view>
						<view class="step-img">
							<image v-if="currentStep == 1" class="step-image z-padding-b-24" src="../../static/service/current.png"></image>
							<image v-if="currentStep > 1" class="step-image z-padding-b-24" src="../../static/service/finish.png"></image>
						</view>
						<view class="line"></view>
						<view class="step-img">
							<image v-if="currentStep == 2" class="step-image z-padding-b-24" src="../../static/service/current.png"></image>
						</view>
					</view>
					<!-- 步骤text -->
					<view class="z-flex-c-s-b z-margin-t-16 step-text-box">
						<view>服务认证</view>
						<view>职业技能</view>
						<view>个人资料</view>
					</view>
				</view>

				<!-- 实名认证 -->
				<block v-if="currentStep == 0">
					<view class="z-padding-t-40 z-padding-l-32 z-radius-t-40 radius">姓名</view>

					<view class="z-padding-lr-32 z-flex-c-s-b">
						<view class="name">
							<input class="input" type="text" placeholder="请输入联系人姓名" v-model="name" />
						</view>
						<view class="z-flex-c-s-b">
							<view class="z-margin-r-32" @tap="setMan">
								<view :class="sex == 1?'sex-img':'sex-img2'">
									<image v-if="sex == 0" class="sex-image" src="../../static/service/current.png"></image>
								</view>
								<text>先生</text>
							</view>
							<view @tap="setWoman">
								<view :class="sex == 0?'sex-img':'sex-img2'">
									<image v-if="sex == 1" class="sex-image" src="../../static/service/current.png"></image>
								</view>
								<text>女士</text>
							</view>
						</view>
					</view>
					<view class="z-padding-l-32 z-margin-t-40">年龄/岁</view>
					<view class="z-margin-l-32 z-radius-20 ipt-box">
						<input class="z-margin-t-24 z-padding-t-40 z-padding-l-32" v-model="age" type="number" placeholder="请输入年龄"/>
					</view>
					<view class="z-padding-l-32 z-margin-t-40">身份证号</view>
					<view class="z-margin-l-32 z-radius-20 ipt-box">
						<input class="z-margin-t-24 z-padding-t-40 z-padding-l-32" v-model="idcard" type="idcard" placeholder="请输入身份证号" />
					</view>
					<!-- 上传照片 -->
					<view class="z-padding-l-32 z-margin-t-40">身份证照片（人像面）</view>
					<view class="z-margin-t-24 each-img" @tap="chooseFront">
						<image v-if="front_image" class="sfz" :src="cdn(front_image)" mode="aspectFit"></image>
						<image v-else class="sfz" src="../../static/service/sfzz.png" mode="aspectFit"></image>
					</view>

					<view class="z-padding-l-32 z-margin-t-40">身份证照片（国徽面）</view>
					<view class="z-margin-t-24 each-img" @tap="chooseOpposite">
						<image class="sfz" v-if="opposite_image" :src="cdn(opposite_image)" mode="aspectFit"></image>
						<image class="sfz" v-else src="../../static/service/sfzf.png"></image>
					</view>

					<view class="z-padding-l-32 z-margin-t-40">实拍照（正面免冠素颜照片）</view>
					<view class="z-margin-t-24 each-img" @tap="chooseUser">
						<image class="sfz" v-if="user_image" :src="cdn(user_image)" mode="aspectFit"></image>
						<image class="sfz" v-else src="../../static/service/picture.png"></image>
					</view>
					<view class="z-padding-lr-32 type-box z-flex-c-s-b z-margin-t-40" @tap="chooseAddress">
						<view class="">地址</view>
						<view v-if="city">
							{{ province }}{{ city }}{{ district }}
							<image class="r-img" src="../../static/service/r-img.png"></image>
						</view>
						<view v-else>
							<text class="text_666">请选择地址</text>
							<image class="r-img" src="../../static/service/r-img.png"></image>
						</view>
					</view>
					<view class="z-padding-lr-32 address-box z-padding-tb-24 z-margin-t-40">
						<view class="z-flex-0 z-padding-r-32">详细地址</view>
						<textarea v-model="address" class="address z-font-32" name="textarea" @input="setAddress" />
					</view>
				</block>

				<!-- 第二步 -->
				<block v-if="currentStep == 1">
					<view class="z-padding-t-40 z-padding-l-32 z-radius-t-40 radius"></view>
					<view class="top">
						<view class="z-padding-l-32 z-margin-t-40">从业资格证照片</view>
						<view class="z-margin-t-24 each-img" @tap="chooseCert">
							<image class="sfz" v-if="certificate_image" :src="cdn(certificate_image)" mode="aspectFit"></image>
							<image class="upt-img" v-else src="../../static/service/upt.png"></image>
						</view>
						<view class="z-padding-l-32 z-margin-t-40">健康证照片</view>
						<view class="z-margin-t-24 each-img" @tap="chooseHealth">
							<image class="sfz" v-if="health_image" :src="cdn(health_image)" mode="aspectFit"></image>
							<image class="upt-img" v-else src="../../static/service/upt.png"></image>
						</view>

						<view class="z-padding-lr-32 type-box z-flex-c-s-b z-margin-t-40" @tap="showCate">
							<view class="">职业技能</view>
							<view>
								{{ cateName }}
								<image class="r-img" src="../../static/service/r-img.png"></image>
							</view>
						</view>
						<view class="z-padding-lr-32 type-box z-flex-c-s-b z-margin-t-40" @tap="chooseGoods">
							<view class="">服务技能</view>
							<view>
								{{ goodsNum }}项
								<image class="r-img" src="../../static/service/r-img.png"></image>
							</view>
						</view>
					</view>
				</block>

				<!-- 第三步 -->
				<block v-if="currentStep == 2">
					<view class="z-padding-t-40 z-padding-l-32 z-radius-t-40 radius"></view>
					<view class="top">
						<view class="z-padding-l-32 z-margin-t-40">工装照（将用作头像展示给用户）</view>
						<view class="z-flex-c">
							<view class="z-margin-l-32 z-margin-t-24 each-img-min" @tap="chooseImage">
								<image class="photo" v-if="image" :src="cdn(image)" mode="aspectFill"></image>
								<image class="upt-img-min" v-else src="../../static/service/upt.png"></image>
							</view>
						</view>
						<view class="z-padding-l-32 z-margin-t-40">相册（可上传多张）</view>
						<view class="z-flex-c image-box">
							<view class="z-margin-l-32 z-margin-t-24 each-img-min images-box" v-for="(item,index) in images" @tap="chooseImages(index)">
								<image class="photo" :src="cdn(item)" mode="aspectFill"></image>
								<image src="/static/service/del.png" class="del" @tap.stop="delImages(index)"></image>
							</view>
							<view class="z-margin-l-32 z-margin-t-24 each-img-min" v-if="images.length<9" @tap="chooseImages">
								<image class="upt-img-min" src="../../static/service/upt.png"></image>
							</view>
						</view>

						<view class="z-padding-lr-32 type-box z-flex-c-s-b z-margin-t-40" @tap="showEdu">
							<view class="">学历</view>
							<view>
								{{ eduName }}
								<image class="r-img" src="../../static/service/r-img.png"></image>
							</view>
						</view>
						<view class="z-padding-lr-32 type-box z-flex-c-s-b z-margin-t-40" @tap="showNation">
							<view class="">民族</view>
							<view>
								{{ nation }}
								<image class="r-img" src="../../static/service/r-img.png"></image>
							</view>
						</view>
						<view class="z-padding-lr-32 type-box z-flex-c-s-b z-margin-t-40" @tap="showExper">
							<view class="">经验</view>
							<view>
								{{ experName }}
								<image class="r-img" src="../../static/service/r-img.png"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- <van-popup position="bottom" show="{{cateShow}}" close-on-click-overlay="true" @close="closeCate">
				<van-picker show-toolbar title="职业技能" columns="{{ cate }}" value-key="name" @confirm="confirm" @cancel="closeCate" />
			</van-popup> -->
			
			<!-- <van-popup position="bottom" show="{{eduShow}}" close-on-click-overlay="true" @close="closeEdu">
				<van-picker show-toolbar title="学历" columns="{{ eduArr }}" @confirm="confirmEdu" @cancel="closeEdu" />
			</van-popup>
			<van-popup position="bottom" show="{{experShow}}" close-on-click-overlay="true" @close="closeExper">
				<van-picker show-toolbar title="经验" columns="{{ experArr }}" @confirm="confirmExper" @cancel="closeExper" />
			</van-popup>
			<van-popup position="bottom" show="{{nationShow}}" close-on-click-overlay="true" @close="closeNation">
				<van-picker show-toolbar title="学历" columns="{{ nationArr }}" value-key="name" @confirm="confirmNation" @cancel="closeNation" />
			</van-popup> -->


			<!-- 下一步 -->
			<view class="operation z-flex-c z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="last" @tap="lastStep">
					<image class="last-img" src="../../static/service/fanhui.png"></image>
					上一步
				</view>
				<view class="z-text-c next-step" @tap="apply" v-if="currentStep === 2">提交</view>
				<view class="z-text-c next-step" @tap="nextStep" v-else>下一步</view>
			</view>
		</view>
		
		<!-- 职业 -->
		<u-picker :show="cateShow" keyName="name" :columns="cate" @confirm="confirm" @cancel="closeCate"></u-picker>
		<!-- 学历 -->
		<u-picker :show="eduShow" :columns="eduArr" @confirm="confirmEdu" @cancel="closeEdu"></u-picker>
		<!-- 经验 -->
		<u-picker :show="experShow" :columns="experArr" @confirm="confirmExper" @cancel="closeExper"></u-picker>
		<!-- 民族 -->
		<u-picker :show="nationShow" :columns="nationArr" @confirm="confirmNation" @cancel="closeNation"></u-picker>
		<!-- 弹出层 -->
		<u-popup :round="10" mode="center" :show="popupShow" @close="onClose">
			<view class="popup-main">
				<text class="z-text-c pop-text z-margin-t-48">感谢您对我们平台工作的支持，我们将在1~3个工作日内审核</text>
				<view class="z-text-c z-margin-b-40 pop-btn z-margin-t-48" @tap="toHome">好的</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			safeBottom: `10px`,
			type: 'add',
			currentStep: 0,
			fileList: [],
			popupShow: false,
			cateShow: false,
			eduShow: false,
			eduArr: [['小学文化', '初中', '高中', '大专', '本科', '硕士', '博士']],
			experShow: false,
			experArr: [['1年以下', '1-3年', '3-5年', '5年以上']],
			nationShow: false,
			nationArr: [[
				'汉族',
				'蒙古族',
				'回族',
				'藏族',
				'维吾尔族',
				'苗族',
				'彝族',
				'壮族',
				'布依族',
				'朝鲜族',
				'满族',
				'侗族',
				'瑶族',
				'白族',
				'土家族',
				'哈尼族',
				'哈萨克族',
				'傣族',
				'黎族',
				'傈僳族',
				'佤族',
				'畲族',
				'高山族',
				'拉祜族',
				'水族',
				'东乡族',
				'纳西族',
				'景颇族',
				'柯尔克孜族',
				'土族',
				'达斡尔族',
				'仫佬族',
				'羌族',
				'布朗族',
				'撒拉族',
				'毛难族',
				'仡佬族',
				'锡伯族',
				'阿昌族',
				'普米族',
				'塔吉克族',
				'怒族',
				'乌孜别克族',
				'俄罗斯族',
				'鄂温克族',
				'崩龙族',
				'保安族',
				'裕固族',
				'京族',
				'塔塔尔族',
				'独龙族',
				'鄂伦春族',
				'赫哲族',
				'门巴族',
				'珞巴族',
				'基诺族'
			]],
			name: '',
			sex: 0,
			age: '',
			idcard: '',
			front_image: '',
			opposite_image: '',
			user_image: '',
			certificate_image: '',
			health_image: '',
			cate: [],
			skill_cate_id: '',
			cateName: '',
			goodsNum: 0,
			goods_ids: '',
			image: '',
			images: [],
			edu: '',
			eduName: '',
			exper: '',
			experName: '',
			nation: '',
			nationName: '',
			province: '',
			city: '',
			district: '',
			address: '',
			lng: '',
			lat: '',
			token: ''
		};
	},
	onLoad(options) {
		this.token = options.token
		if (options.state == -1) {
			this.type = 'edit'
			this.getResult();
		}
		this.getInfo();
	},
	methods: {
		chooseAddress() {
			this.http.chooseLocation(this.lat, this.lng).then((res) => {
				this.province = res.province,
				this.city = res.city,
				this.district = res.district,
				this.address = res.name,
				this.lng = res.lng,
				this.lat = res.lat,
				this.goodsNum = 0,
				this.goods_ids = ''
			});
		},
		setMan(e) {
			this.sex = 0
		},
		setWoman() {
			this.sex = 1
		},
		chooseFront() {
			this.http.chooseImg(['album', 'camera'], true, true, this.token).then((res) => {
				this.front_image = res.data.url
			});
		},
		chooseOpposite() {
			this.http.chooseImg(['album', 'camera'], true, true, this.token).then((res) => {
				this.opposite_image = res.data.url
			});
		},
		chooseUser() {
			this.http.chooseImg(['album', 'camera'], true, true, this.token).then((res) => {
				this.user_image = res.data.url
			});
		},
		chooseCert() {
			this.http.chooseImg(['album', 'camera'], true, true, this.token).then((res) => {
				this.certificate_image = res.data.url
			});
		},
		chooseHealth() {
			this.http.chooseImg(['album', 'camera'], true, true, this.token).then((res) => {
				this.health_image = res.data.url
			});
		},
		chooseImage() {
			this.http.chooseImg(['album', 'camera'], true, true, this.token, ['original', 'compressed']).then((res) => {
				this.image = res.data.url
			});
		},
		delImages(e) {
			let index = e
			this.images.splice(index, 1);
			this.images = this.images
		},
		chooseImages(e) {
			let index = e
			this.http.chooseImg(['album', 'camera'], true, true, this.token).then((res) => {
				let arr = this.images;
				if (index !== undefined) {
					arr.splice(index, 1, res.data.url);
				} else {
					arr.push(res.data.url);
				}
				this.images = arr
			});
		},
		showCate() {
			this.cateShow = true
		},
		showEdu() {
			this.eduShow = true
		},
		showExper() {
			this.experShow = true
		},
		showNation() {
			this.nationShow = true
		},
		closeCate() {
			this.cateShow = false
		},
		closeEdu() {
			this.eduShow = false
		},
		closeExper() {
			this.experShow = false
		},
		closeNation() {
			this.nationShow = false
		},
		confirm(e) {
			if (e.value[0].id !== this.skill_cate_id) {
				this.cateName = e.value[0].name,
				this.skill_cate_id = e.value[0].id,
				this.cateShow = false,
				this.goodsNum = 0,
				this.goods_ids = ''
			}
		},
		confirmEdu(e) {
			this.eduName = e.value[0],
			this.edu = e.indexs[0],
			this.eduShow = false
		},
		confirmExper(e) {
			this.experName = e.value[0],
			this.exper = e.indexs[0],
			this.experShow = false
		},
		confirmNation(e) {
			this.nation = e.value[0],
			this.nationShow = false
		},

		chooseGoods() {
			if (!this.skill_cate_id) return this.util.toast('请先选择职业技能');

			this.util.skip(
				'/service/serveItem/serveItem?skill=' + this.skill_cate_id + '&goods_ids=' + this.goods_ids + '&city=' + this.city + '&token=' + this.token,
				{
					selectGood: (data) => {
						this.goodsNum = data.goods.length,
						this.goods_ids = data.goods.join(',')
					}
				}
			);
		},

		// 下一步
		nextStep() {
			if (this.currentStep === 0) {
				if (this.name.trim() === '') return this.util.toast('请输入姓名');
				if (this.age <= 0) return this.util.toast('请输入正确的年龄');
				if (this.idcard.trim() === '') return this.util.toast('请输入身份证号');
				// if (this.idcard.length !== 18) return util.toast('请输入正确的身份证号')
				if (this.front_image.trim() === '') return this.util.toast('请上传身份证正面');
				if (this.opposite_image.trim() === '') return this.util.toast('请上传身份证反面');
				if (this.user_image.trim() === '') return this.util.toast('请上传实拍照');
				if (this.lat === '') return this.util.toast('请选择地址');
				if (this.address === '') return this.util.toast('请输入详细地址');
			} else if (this.currentStep === 1) {
				if (this.certificate_image.trim() === '') return this.util.toast('请上传从业资格证');
				if (this.health_image.trim() === '') return this.util.toast('请上传健康证');
				if (this.skill_cate_id === '') return this.util.toast('请选择职业技能');
				if (this.goods_ids.trim() === '') return this.util.toast('请选择服务技能');
			}
			this.currentStep = this.currentStep + 1
		},
		// 上一步
		lastStep() {
			if (this.currentStep === 0) {
				this.util.back();
			} else {
				this.currentStep = this.currentStep - 1
			}
		},
		//返回首页
		toHome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		apply() {
			if (this.image.trim() === '') return this.util.toast('请上传工装照');
			// if (this.images.length === 0) return util.toast('请上传生活照')
			if (this.edu === '') return this.util.toast('请选择学历');
			if (this.nation.trim() === '') return this.util.toast('请选择民族');
			if (this.exper === '') return this.util.toast('请选择经验');

			this.http.post(
				'skill/apply',
				{
					type: this.type,
					name: this.name,
					sex: this.sex,
					age: this.age,
					idcard: this.idcard,
					front_image: this.front_image,
					opposite_image: this.opposite_image,
					user_image: this.user_image,
					certificate_image: this.certificate_image,
					health_image: this.health_image,
					skill_cate_id: this.skill_cate_id,
					goods_ids: this.goods_ids,
					image: this.image,
					images: this.images.join(','),
					edu: this.edu,
					exper: this.exper,
					nation: this.nation,
					province: this.province,
					city: this.city,
					district: this.district,
					address: this.address,
					lng: this.lng,
					lat: this.lat
				},
				true,
				false,
				this.token
			)
				.then((res) => {
					this.popupShow = true
				})
				.catch((e) => {
					this.util.toast(e.data.msg);
				});
		},
		getInfo() {
			this.http.post('skillcate/getlist', '', true).then((res) => {
				this.cate = [res.data]
			});
		},
		getResult() {
			this.http.post('skill/apply', {}, true, false, this.token).then((res) => {
				if (res.data) {
					if (res.data.state == -1) {
						this.name = res.data.name,
						this.sex = res.data.sex,
						this.age = res.data.age,
						this.idcard = res.data.idcard,
						this.front_image = res.data.front_image,
						this.opposite_image = res.data.opposite_image,
						this.user_image = res.data.user_image,
						this.certificate_image = res.data.certificate_image,
						this.health_image = res.data.health_image,
						this.skill_cate_id = res.data.skill_cate_id,
						this.cateName = res.data.skillCateName,
						this.goods_ids = res.data.goods_ids,
						this.goodsNum = res.data.goods_ids.split(',').length,
						this.image = res.data.image,
						this.images = res.data.images.length > 0 ? res.data.images.split(',') : [],
						this.edu = res.data.edu,
						this.eduName = this.eduArr[res.data.edu] ? this.eduArr[res.data.edu] : '',
						this.exper = res.data.exper,
						this.experName = this.experArr[res.data.exper] ? this.experArr[res.data.exper] : '',
						this.nation = res.data.nation,
						this.province = res.data.province,
						this.city = res.data.city,
						this.district = res.data.district,
						this.address = res.data.address,
						this.lng = res.data.lng,
						this.lat = res.data.lat
					} else if (res.data.state == 0) {
						this.popupShow = true
					} else if (res.data.state == 1) {
						uni.reLaunch({
							url: '/service/enter/enter'
						});
					}
				} else {
					this.util.skip('/service/enter/enter');
				}
			});
		},
		onClose() {
			this.util.back();
		}
	}
};
</script>

<style>
/* service/enter/enter.wxss */
.box {
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.mian-box {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 30rpx;
}

.step {
	height: 180rpx;
	background-color: #1677ff;
}

.radius {
	background-color: #fff;
	/* width: 100%; */
	height: 60rpx;
	position: relative;
	top: -30rpx;
}

.step-img {
	width: 24rpx;
	height: 24rpx;
	background: #1677ff;
	border-radius: 50%;
	border: 2rpx solid rgba(255, 255, 255, 0.5);
}

.line {
	width: 224rpx;
	height: 0rpx;
	opacity: 1;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.step-image {
	width: 24rpx;
	height: 24rpx;
}

.step-text-box {
	width: 600rpx;
	margin: auto;
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
}

.name {
	width: 390rpx;
	height: 120rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.sex-img {
	display: inline-block;
	width: 32rpx;
	height: 32rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 0.5;
	border: 2rpx solid #a4a9b7;
	border-radius: 50%;
	position: relative;
	top: 8rpx;
	margin-right: 16rpx;
}

.sex-img2 {
	display: inline-block;
	width: 32rpx;
	height: 32rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	/* opacity: 0.5; */
	border: 2rpx solid #fff;
	border-radius: 50%;
	position: relative;
	top: 8rpx;
	margin-right: 16rpx;
}

.input {
	padding: 40rpx 0 0 32rpx;
}

.sex-image {
	width: 32rpx;
	height: 32rpx;
}

.ipt-box {
	width: 686rpx;
	height: 120rpx;
	background: #f5f7f9;
}

.each-img {
	width: 686rpx;
	height: 388rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.sfz {
	width: 505rpx;
	height: 306rpx;
	margin: 41rpx 0 0 91rpx;
}

/* 上下步骤 */
.operation {
	z-index: 10;
	/* margin-bottom: 10rpx; */
	width: 750rpx;
	box-sizing: border-box;
	background: #1677ff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	justify-content: space-around;
	flex-shrink: 0;
	z-index: 10;
}

.last {
	font-size: 30rpx;
	font-weight: bold;
	color: #ffffff;
}

.last-img {
	width: 36rpx;
	height: 36rpx;
}

.next-step {
	width: 502rpx;
	height: 98rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 30rpx;
	font-weight: bold;
	color: #1677ff;
	line-height: 98rpx;
}

/* 第二步 */
.top {
	position: relative;
	top: -120rpx;
}

.upt-img {
	width: 96rpx;
	height: 114rpx;
	display: block;
	margin: auto;
	padding-top: 137rpx;
}

.type-box {
	width: 616rpx;
	height: 120rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	font-size: 30rpx;
	font-weight: 500;
	color: #1c274c;
	margin: auto;
}

.address-box {
	width: 616rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	font-size: 30rpx;
	font-weight: 500;
	color: #1c274c;
	margin: auto;
	display: flex;
	align-items: flex-start;
}

.address {
	margin-top: 6rpx;
	flex: 1;
	box-sizing: border-box;
}

.r-img {
	width: 32rpx;
	height: 32rpx;
	vertical-align: middle;
}

/* 第三步 */
.each-img-min {
	width: 213rpx;
	height: 213rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.upt-img-min {
	width: 96rpx;
	height: 114rpx;
	display: block;
	margin: auto;
	padding-top: 53rpx;
}

.image-box {
	flex-wrap: wrap;
}

.photo {
	height: 100%;
	width: 100%;
}

/* 弹出层 */
.popup-main {
	width: 560rpx;
	/* height: 372rpx; */
	background: #ffffff;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;
}

.pop-text {
	display: block;
	width: 444rpx;
	margin: auto;
	line-height: 46rpx;
}

.pop-btn {
	width: 496rpx;
	height: 100rpx;
	background: #1677ff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	line-height: 100rpx;
	color: #fff;
}

.home {
	z-index: 999;
	width: 310rpx;
	height: 100rpx;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
	opacity: 1;
	border: 1rpx solid #ffffff;
	line-height: 100rpx;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

.block {
	height: 150rpx;
}

.images-box {
	position: relative;
}

.del {
	position: absolute;
	width: 26rpx;
	height: 26rpx;
	right: 0;
	top: -13rpx;
	z-index: 10;
}
</style>
